import { Button, Card, Divider, Typography } from 'antd'
import React, { Fragment, useState } from 'react'
import LoginScreen from './login'
import Register from './register'
import styled from '@emotion/styled'
import logo from '../assets/logo.png'
import back from '../assets/baock.jpg';
import { useDocumentTitle } from 'utils'
import { ErrorBox } from 'components/lib'
import Link from 'antd/lib/typography/Link'
import { NavLink } from 'react-router-dom'

export default function UnauthenticatedApp() {
  const [isRegister,setIsRegister] = useState(false)
  const [error,setErrot] = useState<Error | null> (null)

// useDocumentTitle('请登录注册以继续')
  return ( 
    <Fragment>
      <Container>
        <Background></Background>
        <Header></Header>
        <Button onClick={() =>{throw new Error('点击抛出一个异常')}}>点击抛出异常</Button>
        <ShadoowCard>
          <Title>{isRegister?'请注册':'请登录'}</Title>
          <ErrorBox error={error}/>
          {/* {error? <Typography.Text type='danger'>{error.message}</Typography.Text>:null} */}
          {
            isRegister?<Register onError={setErrot} />:<LoginScreen onError={setErrot}/>
          }
        <Divider></Divider>
        <Button type='link' onClick={()=>{setIsRegister(!isRegister)}}>{isRegister?'已经有账号了？直接登录':'没有账号？注册新账号'}</Button>
        </ShadoowCard>
      </Container>
    </Fragment>
  )
}

export const LongButton =styled(Button)`
  width: 100%;
`

const Title =styled.h2`
  margin-bottom: 2.4rem;
  color: rgb(94,108,132);
`

const Background = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-attachment:fixed;
  background: url(${back});
  background-size: 100%;
  z-index: -1;
`

const Header =styled.header`
  background: url(${logo}) no-repeat center;
  padding: 5rem 0;
  background-size: 12rem;
  width: 100%;
`
const ShadoowCard = styled(Card)`
  width: 40rem;
  min-height: 56rem;
  padding: 3.2rem 4rem;
  border-radius: 0.3rem;
  box-sizing: border-box; 
  box-shadow: rgba(0,0,0,0.1) 0px 0px 10px;
  text-align: center;
`
const Container = styled.div`
  display:flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  /* background-color: red; */
`
